<div id="filter">
  <div class="">
    <div class="border-bottom mb-3">
      <h2 class="pt-3 pb-2"><%= title %></h2>
    </div>

    <%= form_with(model: false, url: "", method: :get, local: true, id: "filter_form", class: "") do |form| %>
      <%= hidden_field_tag :poll, params[:poll] %>
      <%= hidden_field_tag :state, params[:state] %>
      <%= hidden_field_tag :locale, params[:locale] if params[:locale] %>
      <div class="d-md-flex flex-row w-100">
        <div class="me-md-2 mb-2 mb-md-0">
          <%= label_tag "job_queue_filter", t(".queue_name"), class: "visually-hidden" %>
          <select name="queue_name" id="job_queue_filter" class="form-select form-select-sm">
            <option value="" <%= "selected='selected'" if params[:queue_name].blank? %>><%= t ".all_queues" %></option>

            <% filter.queues.each do |name, count| %>
              <option value="<%= name.to_param %>" <%= "selected='selected'" if params[:queue_name] == name %>><%= name %> (<%= number_with_delimiter(count) %>)</option>
            <% end %>
          </select>
        </div>

        <div class="me-md-2 mb-2 mb-md-0">
          <%= label_tag "job_class_filter", t(".job_name"), class: "visually-hidden" %>
          <select name="job_class" id="job_class_filter" class="form-select form-select-sm">
            <option value="" <%= "selected='selected'" if params[:job_class].blank? %>><%= t ".all_jobs" %></option>

            <% filter.job_classes.each do |name, count| %>
              <option value="<%= name.to_param %>" <%= "selected='selected'" if params[:job_class] == name %>><%= name %> (<%= number_with_delimiter(count) %>)</option>
            <% end %>
          </select>
        </div>

        <div class="me-md-2 mb-2 mb-md-0 flex-fill">
          <%= label_tag "query", t(".search"), class: "visually-hidden" %>
          <%= search_field_tag "query", params[:query], class: "form-control form-control-sm", placeholder: t(".placeholder"), autocomplete: "off" %>
        </div>

        <div class="d-flex flex-col align-items-end">
          <div>
            <%= form.submit t(".search"), name: nil, class: "btn btn-primary btn-sm" %>
            <%= link_to filter.to_params(job_class: nil, state: nil, queue_name: nil, query: nil), class: "btn btn-secondary btn-sm" do %>
              <%= t ".clear" %>
            <% end %>
          </div>
        </div>
      </div>
    <% end %>

    <ul data-controller="async-values" data-async-values-url-value="<%= metrics_job_status_path(filter.to_params) %>" data-live-poll-region="filter-tabs" class="nav nav-tabs my-3">
      <li class="nav-item">
        <%= link_to t(".all"), filter.to_params(state: nil), class: "nav-link #{'active' if params[:state].blank?}" %>
      </li>

      <% filter.state_names.each do |name| %>
        <li class="nav-item">
          <%= link_to filter.to_params(state: name), class: "nav-link #{'active' if params[:state] == name}" do %>
            <%= t(name, scope: 'good_job.status') %>
            <span data-async-values-target="value" data-async-values-key="<%= name %>" data-async-values-zero-class="text-bg-secondary" class="badge text-bg-primary rounded-pill d-none"></span>
          <% end %>
        </li>
      <% end %>
    </ul>
  </div>

  <script nonce="<%= content_security_policy_nonce %>">
    document.addEventListener("DOMContentLoaded", () => {
      document.querySelectorAll("#job_class_filter, #job_queue_filter").forEach((filter) => {
        filter.addEventListener("change", () => {
          document.querySelector("#filter_form").submit();
        });
      })
    })
  </script>
</div>
